<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
body {
  margin: 0;
}
#view {
  width: 500px;
  height: 500px;
  margin: 100px auto 0px auto;
  background:;
  position: relative;
}
/*头*/
#head {
  width: 160px;
  height: 175px;
  margin: auto;
  background: #ffe100;
  position: absolute;
  top: 10%;
  left: 35%;
  border-top-left-radius: 45% 43%;
  border-top-right-radius: 45% 43%;
  border-bottom-left-radius: 50% 35%;
  border-bottom-right-radius: 50% 35%;
  border: 4px solid #000;
  border-bottom-color: #ffe100;
}
/*身体*/
#body {
  width: 170px;
  height: 185px;
  background: #ffe100;
  position: absolute;
  top: 38%;
  left: 34%;
  border-bottom-left-radius: 45% 43%;
  border-bottom-right-radius: 45% 43%;
  border-top-left-radius: 30% 90%;
  border-top-right-radius: 30% 90%;
  border: 4px solid #000;
}
/*左耳朵*/
.ear_left {
  width: 100px;
  height: 100px;
  background-color: #ffe100;
  border-radius: 100px 0px;
  border: 4px solid #000;
  position: absolute;
  left: 300px;
}
/*右耳朵*/
.ear_right {
  width: 100px;
  height: 100px;
  background-color: #ffe100;
  border-radius: 0px 100px;
  border: 4px solid #000;
  position: absolute;
  left: 100px;
}
/*右耳朵黑色阴影*/
.ear_shading_right {
  width: 38px;
  height: 77px;
  background-color: #000;
  border-radius: 14% 0% 100% 0%;
  position: absolute;
  left: 370px;
  top: 3px;
}
/*左耳朵黑色阴影*/
.ear_shading_left {
  width: 38px;
  height: 77px;
  background-color: #000;
  border-radius: 0% 14% 0% 100%;
  position: absolute;
  left: 100px;
  top: 3px;
}
/*左脸蛋*/
.face_left {
  width: 45px;
  height: 45px;
  background-color: #ff2200;
  border-radius: 50%;
  margin-top: 100px;
  float: left;
  overflow: hidden;
  border: 2px solid #000;
}
/*右脸蛋*/
.face_right {
  width: 45px;
  height: 45px;
  background-color: #ff2200;
  border-radius: 50%;
  margin-top: 100px;
  float: right;
  overflow: hidden;
  border: 2px solid #000;
}
/*右眼睛*/
.eye_right {
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 20px;
  top: 60px;
  overflow: hidden;
}
/*右眼白*/
.eye_shading_right {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 11px;
}
/*左眼睛*/
.eye_left {
  width: 30px;
  height: 30px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  left: 110px;
  top: 60px;
  overflow: hidden;
}
/*左眼白*/
.eye_shading_left {
  width: 15px;
  height: 15px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 5px;
}
/*鼻子*/
.nose {
  width: 15px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  left: 73px;
  top: 88px;
  position: absolute;
  overflow: hidden;
}
/*嘴巴右*/
.mouth_right {
  width: 35px;
  height: 30px;
  background: #ffe100;
  position: absolute;
  top: 67px;
  left: 72px;
  border-radius: 50%;
  border: 3px solid #ffe100;
  border-bottom-color: #000;
}
/*嘴巴左*/
.mouth_left {
  width: 35px;
  height: 30px;
  background: #ffe100;
  position: absolute;
  top: 67px;
  left: 47px;
  border-radius: 50%;
  border: 3px solid #ffe100;
  border-bottom-color: #000;
}
/*舌头*/
.tongue {
  width: 23px;
  height: 3px;
  background: #ff2200;
  position: absolute;
  top: 102px;
  left: 66px;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border: 3px solid #000;
  border-top-color: #ffe100;
  -webkit-animation: tongue 1s ease-in-out infinite;
  animation: tongue 1s ease-in-out infinite;
}
/*左胳膊*/
.arm_left {
  width: 50px;
  height: 65px;
  background: #ffe100;
  position: absolute;
  top: 50px;
  left: 20px;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border: 4px solid #000;
  border-top-color: #ffe100;
  -webkit-transform: skew(16deg);
  transform: skew(16deg);
}
/*右胳膊*/
.arm_right {
  width: 50px;
  height: 65px;
  background: #ffe100;
  position: absolute;
  top: 50px;
  left: 95px;
  border-bottom-left-radius: 40% 90%;
  border-bottom-right-radius: 40% 90%;
  border: 4px solid #000;
  border-top-color: #ffe100;
  -webkit-transform: skew(-16deg);
  transform: skew(-16deg);
}
/*左腿*/
.leg_left {
  position: absolute;
  width: 47px;
  height: 19px;
  border: 4px solid #000;
  background: #ffe100;
  border-radius: 80% 20% 80% 10%;
  top: 356px;
  left: 164px;
}
/*右腿*/
.leg_right {
  position: absolute;
  width: 47px;
  height: 19px;
  border: 4px solid #000;
  background: #ffe100;
  border-radius: 20% 80% 10% 80%;
  top: 356px;
  left: 293px;
}
/*尾巴上*/
.tail1 {
  width: 127px;
  height: 70px;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background: #ffe100;
  border: 4px solid #000;
  position: absolute;
  top: 100px;
  left: -8px;
}
/*尾巴中*/
.tail2 {
  width: 66px;
  height: 149px;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background: #ffe100;
  border: 4px solid #000;
  position: absolute;
  top: 134px;
  left: 96px;
}
/*尾巴下*/
.tail3 {
  width: 42px;
  height: 87px;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
  background: #ffe100;
  border: 4px solid #000;
  position: absolute;
  top: 235px;
  left: 140px;
}
/*尾巴阴影*/
.tail_shading {
  width: 29px;
  height: 183px;
  -webkit-transform: skew(16deg);
  transform: skew(16deg);
  background: #ffe100;
  position: absolute;
  top: 113px;
  left: 118px;
}
/*尾巴摇摆*/
.tail {
  -webkit-animation: tail 0.2s ease-in-out infinite;
  animation: tail 0.2s ease-in-out infinite;
}
/*吐舌头*/
@-webkit-keyframes tongue {
  0% {
    height: 3px;
  }
  30% {
    width: 20px;
    height: 36px;
  }
  100% {
    height: 3px;
  }
}
/*吐舌头*/
@keyframes tongue {
  0% {
    height: 3px;
  }
  30% {
    width: 20px;
    height: 36px;
  }
  100% {
    height: 3px;
  }
}
/*尾巴摇摆动画*/
@-webkit-keyframes tail {
  0% {
    -webkit-transform-origin: 250px 300px;
    -webkit-transform: rotateZ(0deg);
  }
  60% {
    -webkit-transform-origin: 250px 300px;
    -webkit-transform: rotateZ(10deg);
  }
  100% {
    -webkit-transform-origin: 250px 300px;
    -webkit-transform: rotateZ(0deg);
  }
}
/*尾巴摇摆动画*/
@keyframes tail {
  0% {
    transform-origin: 250px 300px;
    transform: rotateZ(0deg);
  }
  60% {
    transform-origin: 250px 300px;
    transform: rotateZ(10deg);
  }
  100% {
    transform-origin: 250px 300px;
    transform: rotateZ(0deg);
  }
}
</style>
</head>
<body>
  <!--视图框-->
  <div id="view">
    <!--皮卡丘-->
    <div id="pikachu">
      <!--尾巴-->
      <div class="tail">
        <div class="tail3"></div>
        <div class="tail2"></div>
        <div class="tail1"></div>
        <div class="tail_shading"></div>
      </div>
      <!--尾巴结束-->
      <!--耳朵-->
      <div class="ear">
        <div class="ear_left"></div>
        <div class="ear_right"></div>
        <div class="ear_shading_left"></div>
        <div class="ear_shading_right"></div>
      </div>
      <!--耳朵结束-->
      <!--腿-->
      <div class="leg">
        <div class="leg_left"></div>
        <div class="leg_right"></div>
      </div>
      <!--腿结束-->
      <!--身体-->
      <div id="body">
        <div class="arm_left"></div>
        <div class="arm_right"></div>
      </div>
      <!--身体结束-->
      <!--头-->
      <div id="head">
        <!--脸蛋-->
        <div class="face_left"></div>
        <div class="face_right"></div>
        <!--眼睛-->
        <div class="eye_left">
          <!--眼白-->
          <div class="eye_shading_left"></div>
        </div>
        <div class="eye_right">
          <!--眼白-->
          <div class="eye_shading_right"></div>
        </div>
        <!--眼睛结束-->
        <!--嘴巴-->
        <div class="mouth_left"></div>
        <div class="mouth_right"></div>
        <!--舌头-->
        <div class="tongue"></div>
        <!--鼻子-->
      </div>
      <!--头结束-->
    </div>
    <!--皮卡丘结束-->
  
  </div>
  <!--视图框结束-->
</body>
</html>